<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <div th:fragment="orderList">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2>已完成订单</h2>
            <button type="button" class="btn btn-primary" onclick="refreshOrders()">
                <i class='bx bx-refresh'></i> 刷新
            </button>
        </div>

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>预约时间</th>
                        <th>回收地址</th>
                        <th>联系人</th>
                        <th>联系电话</th>
                        <th>回收物品</th>
                        <th>实际重量</th>
                        <th>回收价格</th>
                        <th>完成时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:if="${#lists.isEmpty(orders)}">
                        <td colspan="9" class="text-center">暂无已完成订单</td>
                    </tr>
                    <tr th:each="order : ${orders}">
                        <td th:text="${order.orderNo}">-</td>
                        <td th:text="${#temporals.format(order.appointmentTime, 'yyyy-MM-dd HH:mm')}">-</td>
                        <td th:text="${order.address}">-</td>
                        <td th:text="${userMap[order.userId]?.realName}">-</td>
                        <td th:text="${order.contactPhone}">-</td>
                        <td>
                            <span class="badge bg-info" th:each="item : ${order.itemType}" 
                                  th:text="${item == 'PLASTIC' ? '塑料' : 
                                           item == 'METAL' ? '金属' : 
                                           item == 'PAPER' ? '纸类' :
                                           item == 'GLASS' ? '玻璃' :
                                           item == 'FABRIC' ? '布料' :
                                           item == 'ELECTRONICS' ? '电子产品' : item}">物品</span>
                        </td>
                        <td th:text="${order.actualWeight != null ? #numbers.formatDecimal(order.actualWeight, 1, 1) + ' kg' : '-'}">-</td>
                        <td th:text="${order.price != null ? #numbers.formatDecimal(order.price, 1, 2) + ' 元' : '-'}">-</td>
                        <td th:text="${#temporals.format(order.completeTime, 'yyyy-MM-dd HH:mm')}">-</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- JavaScript代码 -->
    <script th:inline="javascript">
    function refreshOrders() {
        // 显示加载中提示
        const loadingToast = Swal.fire({
            title: '刷新中...',
            text: '正在获取最新订单',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        // 发送请求获取最新订单列表
        fetch('/collector/orders/completed/list')
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取订单列表失败');
                }
                return response.text();
            })
            .then(html => {
                // 更新订单列表内容
                document.querySelector('[th\\:fragment="orderList"]').outerHTML = html;
                loadingToast.close();
                
                // 显示成功提示
                Swal.fire({
                    icon: 'success',
                    title: '刷新成功',
                    text: '订单列表已更新',
                    timer: 1500,
                    showConfirmButton: false
                });
            })
            .catch(error => {
                console.error('刷新订单列表失败:', error);
                loadingToast.close();
                
                Swal.fire({
                    icon: 'error',
                    title: '刷新失败',
                    text: error.message || '请稍后重试'
                });
            });
    }
    </script>
</body>
</html> 